<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="d3.v4.min.js"></script>
    <!-- <script src="d3.v3.min.js"></script> -->
    <canvas width="960" height="960"></canvas>
    <script>
        const canvas = document.querySelector("canvas")
        const ctx = canvas.getContext("2d")

        //实现彩虹的颜色插值-1
        const color = d3.scaleSequential()
        .domain([0, 2 * Math.PI])    
        .interpolator(d3.interpolateRainbow);
        //实现彩虹的颜色插值-2
        const colors = d3.scaleLinear()
            .domain([0, 7])
            .range(d3.interpolateCool);
        //实现彩虹的颜色插值-3
        const color = d3.scaleOrdinal()
    .domain(data.map(d =>{return d.name}))
    .range(d3.quantize(d3.interpolateRainbow , data.length))

        //实现两种颜色区域的渐变
        var color = d3.scaleSequential(d3.interpolateLab("white", "steelblue"))
    .domain([0, 20]);

        console.log(color(0.6));

        ctx.rect(100,100,50,50);
        ctx.fillStyle=color(0.6);
        ctx.fill();
    </script>
</body>
</html>